<template>
  <text :style="styleInfo" v-if="messageNum > 0" class="benben_message_num">
    {{ messageNum > 99 ? '···' : messageNum }}
  </text>
</template>
<script>
export default {
  name: 'benben-message-num',
  props: {
    messageNum: { type: [String, Number], default: 0 },
    size: { type: [String, Number], default: '24' }, //消息字体大小
    color: { type: [String, Number], default: '#eee' },
    backgroundColor: { type: [String, Number], default: 'red' },
  },
  components: {},
  computed: {
    styleInfo() {
      let _size = this.size / 0.8 + 'rpx'
      return `background-color:${this.backgroundColor};font-size:${this.size}rpx;color:${this.color};width:${_size};height:${_size};`
    },
  },
  data() {
    return {}
  },
  watch: {},
  methods: {},
  created() {},
  beforeDestroy() {},
}
</script>
<style lang="scss" scoped>
.benben_message_num {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 500;
}
</style>
